import React, { useState } from 'react';
import './style.scss';

const ExpandableSection = ({
    title = '标题',
    children,
    expanded = false,
    onToggle,
    style,
}) => {
    const [isExpanded, setIsExpanded] = useState(expanded);

    const handleToggle = () => {
        setIsExpanded(!isExpanded);
        onToggle && onToggle(!isExpanded);
    };

    return (
        <div className="expandable-section">
            <div className="section-header" onClick={handleToggle}>
                <h3 className="section-title">{title}</h3>

                <img
                    className={`arrow ${isExpanded ? 'expanded' : ''}`}
                    src="https://img.alicdn.com/imgextra/i3/O1CN01oCSuDy1PAuN5OwQnF_!!6000000001801-55-tps-20-20.svg"
                    alt=""
                />
            </div>

            <div
                className={`section-content ${isExpanded ? 'expanded' : ''}`}
                style={style}
            >
                <div className="content-inner">{children}</div>
            </div>
        </div>
    );
};

export default ExpandableSection;
